html,
body {
    height: 100%
}
.preview-body{
    opacity: 0;
    transition: opacity 0.35s;
}
.preview-body.loaded{
    opacity: 1;
}


/* TinyMCE Styles */

.mce-content-body {
    height: calc(100% - 15px);
}

.mce-content-body:focus {
    outline: none;
}

.tox-tinymce-inline,
.tox-tinymce-inline .tox-editor-header,
.tox .tox-toolbar-overlord {
    border-radius: 10px !important;
}

.tox-toolbar-overlord .tox-toolbar:first-child {
    border-radius: 10px 10px 0 0;
}
.tox .tox-toolbar__group {
    padding: 0 10px 0 10px !important;
}

.tox-toolbar-overlord .tox-toolbar:last-child {
    border-radius: 0 0 10px 10px;
}

.tox-tinymce-inline .tox-editor-header {
    opacity: 0.95;
}

.editable h1,
.editable h2,
.editable h3,
.editable h4,
.editable h5,
.editable p {
    margin: 0;
    /* margin-bottom: 5px; */
}

.snotify.snotify-centerCenter{
    width: 90%;
    max-width: 500px;
    left: calc(50% - 500px / 2);
    text-align: center;
}
.snotify.snotify-centerCenter .snotifyToast{
    background: linear-gradient(0.5turn, #06874e, #00a758);
    box-shadow: 0 0 15px #1a1a1a;
}
.snotify.snotify-centerCenter .snotifyToast__title,
.snotify.snotify-centerCenter .snotifyToast__body{
    width: 100%;
}

.snotify.snotify-centerCenter .snotifyToast__body{
    padding-bottom: 10px;
}


/* Base styles */

body {
    margin: 0;
    box-sizing: border-box;
}

#body-wrapper {
    position: relative;
    top: 0;
    height: 100%;
}


/* Font styles */

#sidebar {
    font-family: 'Roboto Condensed', sans-serif;
}

#main,
.preview-header,
textarea,
.ql-container {
    font-family: 'Roboto', sans-serif;
}

.preview-body {
    font-family: "Muli", Helvetica, sans-serif;
}

p.smallerText {
    font-size: 11px;
}


/* Component styles */

.resize-handle {
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: w-resize;
}

#preview {
    width: 850px;
    height: 100%;
    float: right;
    display: flex;
    flex-flow: column nowrap;
    overflow-y: auto;
    transition: width .5s ease-in-out;
    position: relative;
}

#main {
    width: calc(calc(100% - 80px) - 850px);
    height: 100%;
    float: right;
    background-color: #eee;
    transition: width .15s;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    left: 0;
    border-right: 1px solid #ddd;
    box-shadow: 0 12px 20px -10px rgba(76, 175, 80, .28), 0 4px 20px 0 rgba(0, 0, 0, .12), 0 7px 8px -5px rgba(76, 175, 80, .2);
    transition: all .5s ease-in-out;
}

#preview.closed~#main {
    width: calc(calc(100% - 80px));
}

#sidebar.stuck~#main {
    width: calc(calc(100% - 260px) - 850px);
}

#preview.large~#main {
    width: 0;
    /* left: calc(-1 * calc(calc(110% - 80px) - 850px)); */
}

#preview.large {
    width: calc(100% - 80px);
}

#preview.large .preview-header {
    width: 100%;
}

@media(max-width: 1500px) {
    #main {
        width: calc(100% - 80px);
    }
    #sidebar.stuck~#main {
        width: calc(100% - 260px);
    }
    #preview.large~#main {
        left: calc(-1 * calc(110% - 80px));
    }
    #preview {
        width: 0;
    }
    #sidebar.stuck~#preview.large {
        width: calc(100% - 260px);
    }
    /* #sidebar.stuck ~ #preview.large .preview-header{
    width: calc(100% - 260px);
  } */
}

#preview.closed {
    width: 0%;
}

#sidebar.stuck~#preview.closed~#main {
    width: calc(calc(100% - 260px));
}


/* Sidebar styles */

#sidebar {
    width: 80px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: #333;
    background-image: url(https://static.twentyoverten.com/5b6499146b80a9633b347026/UH-5vE468Ti/iStock-900381778.jpg);
    background-position: bottom center;
    background-size: cover;
    transition: width .35s;
    color: #fff;
    font-size: 16px;
    letter-spacing: unset;
    display: flex;
    flex-flow: column nowrap;
    z-index: 99;
    padding-bottom: 32px;
}

#sidebar.open {
    width: 260px;
}

#sidebar .collapsed {
    position: relative;
    left: -300px;
    opacity: 0;
    transition: all .45s;
}

#sidebar.open .collapsed {
    left: 0;
    opacity: 1;
}


/* Sitebar item styles */

.sidebar-menu {
    list-style: none;
    margin: 5px 0;
    padding: 0;
    overflow-y: auto;
}

#sidebar .sidebar-pin {
    position: absolute;
    top: 5px;
    right: 300px;
    transition: all .35s;
    font-size: .8em;
    cursor: poiner;
    border-radius: 5px;
    border: 1px solid rgba(180, 180, 180, .3);
    padding: 5px;
}

#sidebar.open .sidebar-pin {
    right: 5px;
    color: #fff;
    opacity: .8;
}

#sidebar .sidebar-pin:hover {
    opacity: 1;
    border: 1px solid rgba(180, 180, 180, .7);
}

#sidebar.stuck .sidebar-pin {
    opacity: 1;
    border: 1px solid rgba(180, 180, 180, .7);
    background-color: #343434;
}

.sidebar-item,
.sidebar-title {
    padding: 10px;
    margin: 10px;
    white-space: nowrap;
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    border-radius: 5px;
    transition: background-color .2s;
}

.sidebar-item:hover {
    background-color: rgba(155, 155, 155, .3);
    cursor: pointer;
}

.sidebar-item.active {
    box-shadow: 0 12px 20px -10px rgba(76, 175, 80, .28), 0 4px 20px 0 rgba(0, 0, 0, .12), 0 7px 8px -5px rgba(76, 175, 80, .2);
    background-color: #00a72a;
}

#sidebar .sidebar-item i,
#sidebar .sidebar-title i {
    margin-right: 20px;
    padding-left: 4px;
    justify-content: center;
    line-height: 30px;
    opacity: .8;
    width: 32px;
}

#sidebar .sidebar-title i {
    opacity: 1;
}

#sidebar .sidebar-item.active i {
    opacity: 1;
}

#sidebar p {
    line-height: 30px;
    padding: 0;
    margin: 0;
}

.sidebar-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 95%;
    height: 1px;
    background-color: rgba(180, 180, 180, .3);
}

.sidebar-split {
    position: relative;
}

.sidebar-split::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -5px;
    width: 95%;
    height: 1px;
    background-color: rgba(180, 180, 180, .3);
}

#sidebar .footer {
    position: absolute;
    bottom: 3px;
    color: #aaa;
    font-size: 10px;
    text-align: center;
    width: 100%;
}


/* Main view */

.main-view {
    position: absolute;
    display: block;
    width: calc(100% - 20px);
    left: 100%;
    padding: 20px 10px;
    transition: .5s ease-in-out;
    height: 0;
    opacity: 0;
}

.main-view:not(.open) {
    animation: hidingViews 0.1s linear 0.5s;
    animation-fill-mode: forwards;
}

.main-view.open {
    left: 0;
    display: block;
    opacity: 1;
    overflow: unset;
}

@keyframes hidingViews {
    from {
        overflow: unset;
    }
    to {
        overflow: hidden;
    }
}


/* Card styles */

.card {
    background: #fff;
    border-radius: 6px;
    /* box-shadow: 0 1px 4px 1px rgba(0,0,0,.14); */
    box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.25);
    border: 1px solid #e3e3e3;
    padding: 15px 10px;
    margin: 5px;
    position: relative;
}

.card-title {
    position: relative;
    font-weight: lighter;
    margin-bottom: 20px;
}

.card-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 95%;
    height: 1px;
    background-color: rgba(180, 180, 180, .3);
}

.card-title-icon:hover .tool-icon,
.tool-icon:hover {
    color: #aeaeae;
}

.card-title-icon {
    font-size: 1.5em;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
}

.card-title-help {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    max-height: 1px;
    top: 50%;
    right: 0;
    width: 1px;
    background: #fff;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, .14);
    padding: 5px;
    font-size: 11px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: text;
    overflow: hidden;
    z-index: 5;
    transition: top .35s, visibility .35s, opacity .35s, max-height 1s;
}

.card-title-icon:hover .card-title-help {
    visibility: visible;
    top: -10%;
    width: 200px;
    max-height: 1000px;
    opacity: 1;
}


/* Popups */

.popup .popup-wrapper {
    opacity: 0;
    border-radius: 15px;
    width: 100%;
    max-width: 800px;
    position: absolute;
    bottom: -50%;
    left: 50%;
    z-index: 100;
    transform: translateX(-50%);
    transition: all 0.5s;
}

.popup .popup-inner {
    height: 100%;
}

.popup .popup-close:hover,
.popup .popup-close:focus {
    color: #999;
}

.popup .popup-content {
    padding: 5px;
}

.popup.open .popup-wrapper {
    opacity: 1;
    bottom: 15%;
}

.popup .popup-outerWrapper {
    position: fixed;
    visibility: hidden;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
}

.popup.open .popup-outerWrapper {
    visibility: visible;
    background: rgba(0, 0, 0, .15);
}


/* Tool styles */

.tool-icon {
    color: #dedede;
    cursor: pointer;
}

.tool-list {
    display: flex;
    flex-flow: row nowrap;
}

.tool-list.vertical {
    display: flex;
    flex-flow: column nowrap;
    margin: 5px;
    text-align: center;
}

.tool-list.vertical.space-even {
    justify-content: space-around;
}

.tool-list.vertical i {
    margin: 7px 0;
}

.tool-list i {
    margin-left: 5px;
}


/* Row and Col Styles */

.row {
    display: flex;
    flex-flow: column nowrap;
}

.row.middle {
    align-items: center;
}

.row {
    flex-flow: row nowrap;
}

.col {
    flex-grow: 1;
}

.col.col-2 {
    flex-grow: 2;
}

.col.col-3 {
    flex-grow: 3;
}

@media(min-width: 820px) {
    .col:not(:first-of-type) {
        margin-left: 5px;
    }
    .col:not(:last-of-type) {
        margin-right: 5px;
    }
    .col.col-left {
        border-left: 1px solid #ccc;
        padding-left: 10px;
    }
    .col.col-right {
        border-right: 1px solid #ccc;
        padding-right: 10px;
    }
}

@media(max-width: 820px) {
    .row {
        flex-flow: row wrap;
    }
    .col {
        flex-basis: 100%;
    }
}

.col-title {
    text-align: center;
}


/* Preview Styles */

.preview-header {
    background-image: url(https://static.twentyoverten.com/5b6499146b80a9633b347026/UH-5vE468Ti/iStock-900381778.jpg);
    background-position: top center;
    background-size: cover;
    text-align: center;
    position: fixed;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    transition: width .5s ease-in-out;
}

#newsletterwrapper {
    padding-top: 15px;
}

.preview-header>* {
    font-weight: normal;
    color: #fff;
}
/* Template Styles */
.template-thumbnail{
    width: 200px;
    height: 300px;
    padding-left: 30px;
}

/* Form Styles */

.form-item {
    position: relative;
    margin-bottom: 15px;
    min-height: 20px;
}

.form-item label {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 14px;
    transition: all 0.5s ease-in-out;
    cursor: text;
    color: #aaa;
}

.card.dark input[type="text"] {
    color: #fff;
}

.form-item.border:not(.split) {
    border-bottom: 1px solid #d2d2d2;
}

.form-item.split.border>div,
.form-item.split>div.border {
    border-bottom: 1px solid #d2d2d2;
    display: flex;
    vertical-align: bottom;
}

.form-item.split {
    display: flex;
    flex-flow: row nowrap;
    position: relative;
}

@media(max-width: 820px) {
    .form-item.split {
        flex-flow: row wrap;
    }
    .form-item>*:not(:last-of-type) {
        margin-bottom: 15px;
    }
}

@media(max-width: 540px) {
    .form-item.split>div {
        flex-basis: 100%;
    }
}

.form-item.split>*:first-child {
    flex-grow: 1;
    position: relative;
}

.form-item.split.even>* {
    flex-grow: 1;
    flex-basis: 50%;
    position: relative;
}

@media(min-width: 820px) {
    .form-item.split.even>*:not(:first-of-type) {
        margin-left: 5px;
    }
    .form-item.split.even>*:first-of-type {
        margin-right: 5px;
    }
}

.form-item input[type="text"],
.form-item input[type="number"],
.form-item input[type="search"],
.form-item input[type="color"],
.form-item textarea,
.form-item .editable {
    min-width: 150px;
}

.form-item input[type="text"]:focus~label,
.form-item input[type="text"]:valid~label,
.form-item input[type="search"]:focus~label,
.form-item input[type="search"]:valid~label,
.form-item textarea:focus~label,
.form-item textarea:valid~label,
.form-item .editable:focus~label,
.form-item .editable:not(:empty)~label {
    top: -13px;
    font-size: 12px;
}

.form-item input[type="text"]:focus,
.form-item input[type="search"]:focus,
.form-item input[type="number"]:focus,
.form-item textarea:focus,
.form-item .editable:focus {
    border: none;
    outline: none;
}

.form-item input[type="text"],
.form-item input[type="search"],
.form-item input[type="number"],
.form-item textarea,
.form-item .editable,
.form-item select {
    border: 0;
    outline: none;
    background: transparent;
    width: 100%;
    padding: 2px 0 5px 0;
    resize: vertical;
    font-size: 13px;
}

.form-item input.hideBorder {
    border: none !important;
}


/* Number styles */

.form-item input[type="number"] {
    text-align: right;
    position: relative;
    cursor: pointer;
}

input::-webkit-inner-spin-button {
    margin-left: 20px;
}

.form-item input[type="number"].compact::-webkit-inner-spin-button {
    margin-left: 0;
}

.form-item input.hideSpin::-webkit-inner-spin-button {
    display: none !important;
}

.form-item input[type="number"].compact {
    text-align: center;
    border: 0;
    margin: 0 10px;
    width: 40px;
    min-width: 0;
    border-bottom: 1px solid #d2d2d2;
}


/* Select styles */

.form-item select {
    text-align-last: right;
    top: -8px;
    position: relative;
}

.form-item select~label {
    top: -2px;
}


/* Editable Content */

.form-item .editable {
    margin: 0;
}


/* Button Style */

.form-item input[type="button"],
.form-item button {
    color: #fff;
    background-color: #00a72a;
    outline: none;
    border: 0;
    color: #fff;
    padding: 10px 20px;
    text-transform: uppercase;
    margin: 0 10px;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    transition: background-color .35s;
}

.form-item input[type="button"]:focus,
.form-item input[type="button"]:hover,
.form-item button:focus,
.form-item button:hover {
    background-color: #04711f;
}


/* Color Styles */

input[type="color"] {
    outline: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

input[type="color"].postColorSelector {
    width: 20px;
    height: 20px;
    opacity: .75;
    margin-top: 5px;
}

input[type="color"].postColorSelector:hover,
input[type="color"].postColorSelector:focus {
    opacity: 1;
}

.form-item input[type="color"] {
    width: 100%;
    height: 30px;
    transition: box-shadow .3s;
}

.form-item input[type="color"]:focus,
.form-item input[type="color"]:hover {
    box-shadow: 0 12px 20px -10px rgba(76, 175, 80, .28), 0 4px 20px 0 rgba(0, 0, 0, .12), 0 7px 8px -5px rgba(76, 175, 80, .2);
}

.form-item input[type="color"]~label {
    color: #fff;
    top: 6px;
    left: 10px;
    position: absolute;
    cursor: pointer;
}

.form-item input[type="color"].light~label {
    color: #111;
}


/* Checkbox styles */

.form-item input[type="checkbox"] {
    -webkit-appearance: none;
    border: 1px solid #777;
    width: 30px;
    height: 18px;
    position: relative;
    top: -2px;
    border-radius: 34px;
    transition: all .35s;
}

.form-item input[type="checkbox"]:checked {
    border: 1px solid #00a72a;
}

.form-item input[type="checkbox"]:focus {
    outline: none;
}

.form-item input[type="checkbox"]::before {
    content: ' ';
    position: absolute;
    width: 12px;
    height: 12px;
    opacity: 1;
    transform: translateX(12px);
    background: #aaa;
    top: 2px;
    left: 2px;
    transition: transform .35s, opacity .5s;
    transform-origin: center center;
    border-radius: 50%;
}

.form-item input[type="checkbox"]:checked::before {
    background: #00a72a;
    transform: translateX(0);
}

.form-item input[type="checkbox"].checkbox-right {
    left: calc(100% - 30px);
}

.form-item input[type="checkbox"].checkbox-right::before {
    left: calc(100% - 26px);
}

.form-item input[type="checkbox"].checkbox-right~label {
    left: 0;
    top: 1px;
}

.form-item input[type="checkbox"]~label {
    left: 40px;
    top: 1px;
}

.form-item input[type="checkbox"]:hover,
.form-item input[type="checkbox"]~label {
    cursor: pointer;
}


/* Slider styles */

.form-item .slider-wrapper {
    display: flex;
    flex-flow: row nowrap;
}

.form-item .slider-wrapper>label {
    position: relative;
    padding-right: 10px;
}

.form-item .slider-wrapper>label>input[type="number"] {
    color: #aaa;
    text-align: left;
    position: absolute;
    left: calc(100% - 15px);
    top: -1px;
    z-index: 1;
    cursor: text;
}

.form-item .slider-wrapper>div {
    position: relative;
    flex-grow: 1;
}

.form-item input[type="range"] {
    display: block;
    -webkit-appearance: none;
    background-color: #bdc3c7;
    width: 90%;
    height: 5px;
    border-radius: 5px;
    margin-left: auto;
    outline: 0;
    top: 4px;
    position: relative;
}

.form-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #777;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
    transition: background-color .35s;
    z-index: 1;
    position: relative;
}

​.form-item input[type="range"]:focus::-webkit-slider-thumb,
.form-item input[type="range"]:active::-webkit-slider-thumb,
.form-item input[type="range"]::-webkit-slider-thumb:hover {
    background-color: #00a72a;
}


/* Edit Posts list */

.newsletter-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.newsletter-list li.card {
    display: flex;
    flex-flow: row nowrap;
}

.newsletter-list .post {
    flex-grow: 1;
    display: flex;
    flex-flow: row nowrap;
}

.newsletter-list .post .data {
    margin-left: 5px;
    margin-right: 5px;
    flex-grow: 1;
    display: flex;
    flex-flow: column nowrap;
}

.post .post-img {
    width: 124px;
    height: auto;
    object-fit: cover;
    margin-left: 5px;
}


/* Accordion styles */

.accordion {
    border-radius: 2px;
    margin: 5px 0;
}

.accordion-title {
    background: #eee;
    transition: all .35s;
    padding: 5px 10px;
    position: relative;
    cursor: pointer;
}

.accordion-title p {
    margin-block-start: 10px;
    margin-block-end: 10px;
}

.accordion-title::before {
    content: ' ';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 75px;
    height: 100%;
    width: 1px;
    background-color: #fff;
}

.accordion-title .selector {
    width: 16px;
    height: 16px;
    border: 1px solid #cacaca;
    border-radius: 100%;
    margin-right: 16px;
    position: absolute;
    top: 16px;
    right: 15px;
    transition: .35s;
}

.accordion.open .selector {
    border-color: #00a72a;
}

.accordion-title .selector::before {
    background: #00a72a;
    opacity: 0;
    transition: .35s;
    content: "";
    display: block;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    position: absolute;
    transform: scale(0);
    transform-origin: center center;
}

.accordion.open .selector::before {
    opacity: 1;
    transform: scale(.8);
}

.accordion-content {
    max-height: 0;
    position: relative;
    transition: all .35s;
    overflow: hidden;
}

.accordion.open .accordion-content {
    max-height: 1000px;
    padding: 15px 10px;
    overflow: visible;
}


/* Tool Styles */


/* Banner creation */

.bannerValidWrapper {
    display: none;
    position: relative;
}

.bannerValidWrapper.loading img {
    filter: blur(.5px);
}

.bannerValidWrapper.loading .bannerCreatedImageLoadingWrapper {
    position: absolute;
    width: 101%;
    top: 0;
    left: 0;
    height: 100%;
    background-color: rgba(255, 255, 255, .5);
}

.bannerValidWrapper.loading .bannerCreatedImageLoadingWrapper i {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #333333;
    animation: loading-spinning 1s infinite;
}

.bannerValidWrapper:not(.loading) .bannerCreatedImageLoadingWrapper {
    display: none;
}

@keyframes loading-spinning {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}